<template>
	<view class="records">
		<view class="single" v-for="(item,index) in recordList" :key="index">
			<view class="name">
				<text>{{item.type}}</text>
				<text class="status">{{item.create_date}}</text>
			</view>

			<view class="desc">
				<text class="remark">{{item.remark}}</text>
				<text class="amount">{{item.amount}}</text>
			</view>
		</view>

		<view v-show="isLoadMore && recordList.length >0">
			<uni-load-more :status="loadStatus"></uni-load-more>
		</view>

		<view class="nodata" v-if="recordList.length == 0">
			<image class="empty_img" :src="IMGLink+'/my/empty.png'" mode="widthFix"></image>
			<view>没有你想要的内容</view>
		</view>
	</view>
</template>

<script>
	import {
		coins
	} from '@/api/my/my.js';
	export default {
		data() {
			return {
				IMGLink: this.IMGLink,
				recordList: [],
				recordStatus: {
					"1": {
						name: "已发放"
					},
					"2": {
						name: "未发放"
					}
				},
				page: 1, //页码
				size: 10,
				loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore: false, //是否加载中
				refresh: false, // 下拉刷新标示
			}
		},
		onLoad() {
			this.getDataList();
		},
		methods: {
			// 列表
			getDataList() {
				uni.showLoading({
					title: '加载中'
				});
				coins('accountrecord', {
					page: this.page,
					page_size: this.size,
				}).then(res => {
					let datas = res.data.data;
					this.recordList = this.page == 1 ? datas : this.recordList.concat(datas);
					if (datas.length < this.size) { //小于size数，停止请求
						this.isLoadMore = true;
						this.loadStatus = 'nomore';
					} else {
						this.isLoadMore = false;
					}
					uni.hideLoading();
					if (this.refresh) {
						uni.stopPullDownRefresh();
						this.refresh = false;
					}
				}).catch(error => {
					uni.hideLoading();
					this.isLoadMore = false;
				})
			},
			onPullDownRefresh() {
				this.page = 1;
				this.getDataList();
				this.refresh = true;
			},
			onReachBottom() {
				if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
					this.isLoadMore = true;
					this.page++;
					this.getDataList();
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "../my.scss";

	.records {
		padding: 0 20rpx;
		font-size: 24rpx;
		color: #363636;

		.single {
			border-bottom: 2rpx solid #F3F3F3;
			padding: 20rpx;

			.name {
				font-size: 26rpx;
				color: #000000;
				margin-bottom: 26rpx;

				.status {
					color: #6D6D6D;
				}
			}

			.desc,
			.name {
				@include flexLayout(center, space-between);

			}

			.remark {
				width: 81%;
				color: #595959;
			}

			.amount {
				color: #F54642;
				font-size: 30rpx;
				font-weight: 500;
			}
		}

		.nodata {
			text-align: center;
			color: #7D7D7D;
			font-size: 24rpx;
			margin-top: 50%;

			.empty_img {
				width: 468rpx;
			}
		}
	}
</style>
